<template>
	<uni-transition :show="show" mode-class="slide-right" :duration="500">
		<view style="background-color: #F4FAF8; height: 2000rpx;">
		<tabbar title="账号资料" v-model:show="show"/>
		<view class="flex align-center flex-direction">
			<view class="cu-avatar round" 
			style="width: 180upx; height: 180upx;margin-top: 90rpx;"></view>
			<text class="block" style="font-size: 35rpx;margin-top: 40rpx;">{{renderingStore.userInfo?.username}}</text>
		</view>
		<view class="flex justify-around" style="width: 90%;margin-left: 36rpx;margin-top: 50rpx;margin-bottom: 40rpx;">
			<button class="cu-btn" style="width: 320rpx;height: 100rpx; border-radius: 30rpx; background-color: #ECF2F0;">
				<uni-icons type="camera" size="30" color='#506159'></uni-icons>
				<text style="font-size: 30rpx;margin-left: 10rpx; margin-top: 10rpx; color: #506159;">更换头像</text>
			</button>
			<button class="cu-btn" style="width: 320rpx;height: 100rpx; border-radius: 30rpx; background-color: #ECF2F0;" @click="updateUsername">
				<uni-icons type="compose" size="30" color='#506159'></uni-icons>
				<text style="font-size: 30rpx;margin-left: 10rpx; margin-top: 10rpx; color: #506159;">修改昵称</text>
			</button>
		</view>
		<view class="">
			<list text="手机号" :secondaryText="renderingStore.userInfo?.phone" icon="right"/>
			<view style="margin-left: 70rpx;color: darkgray;margin-top: 10upx;">❤我们将加密保护您的手机号码</view>
			<list text="密码" :secondaryText="renderingStore.userInfo?.password ? '已设置' : '未设置'" icon="right" @click="updatePassword"/>
			<list text="注册日期" :secondaryText="renderingStore.userInfo?.createdAt"/>
			<list text="注销账号" @click="cancel"/>
			<list text="退出登录" textColor="#2DD296" @click="goLogin"/>
		</view>
	</view>
	</uni-transition>
</template>

<script setup lang="ts">
import { ref, onMounted, type Ref, } from 'vue';
import uniTransition from '@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
import tabbar from '@/components/tabbar.vue';
import http from '@/utils/http';
import { useSave } from '@/store';
// const saveStore = useSave()
// saveStore.userInfo = null

//获取状态机实例
const renderingStore = useSave()
//加密手机号
renderingStore.encryptedPhone()
//处理时间
renderingStore.registerTime()
console.log(renderingStore.userInfo?.password);

const show = ref(false);
//生命周期，保证动画效果
onMounted(() => {
  // 延迟显示以触发动画
  setTimeout(() => {
    show.value = true;
  }, 50);
});
//退出登录
const goLogin = ()=>{
	console.log(1);
	if(!renderingStore.userInfo?.password){
		uni.showToast({
			title:'请设置密码后再退出登录',
			icon:'none',
			duration:2000
		})
		return
	}
	show.value = false
	setTimeout(()=>{
		uni.navigateTo({
			url:'/pages/login/login'
		})
	},100)
}

//修改密码
const updatePassword = ()=>{
	uni.navigateTo({
		url:'/pages/mine/updatePassword'
	})
}

//修改昵称
const updateUsername = ()=>{
	uni.navigateTo({
		url:'/pages/mine/updateUsername'
	})
}

//注销账号
const cancel = ()=>{
	uni.navigateTo({
		url:'/pages/mine/cancel'
	})
}

//跟新用户数据
// let avatar:Ref<string> = ref('')
// let username:Ref<string> = ref('')
// let password:Ref<string> = ref('')
// const handleUpdate = async ()=>{
// 	let res = await userUpdate(avatar.value,username.value,password.value)
// }

// //获取数据库中的号码
// const phoneNum = ref<string>('')
// //三方库网络请求获取leancloud中的number数据
// http.get('/classes/Users').then(res =>{
// 	console.log('数据',res);
// 	// 从results数组中获取第一个元素的phone属性
// 	if(res.data.results && res.data.results.length > 0) {
// 		phoneNum.value = res.data.results[0].phone
// 		console.log('获取到的手机号:', phoneNum.value);
// 	}
// 	//号码加密
// 	phoneNum.value = phoneNum.value.slice(0,3)+'****'+phoneNum.value.slice(7)
// })

</script>

<style lang="scss">

</style>
